/* * @Author: wangsh  * @Date: 2019-05-11 19:29:22  */
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import { Breadcrumb } from 'antd';
import MenuConfig from '../navLeft/menuConfig';

const routes = JSON.parse(localStorage.getItem('router')) || [];
const hashUrl = window.location.hash.slice(1);

class BreadNav extends Component {
  componentDidMount() {
    if (routes.length === 0) {
      this.menuEach(MenuConfig);
      localStorage.setItem('router', JSON.stringify(routes));
    }
    // eslint-disable-next-line no-debugger
    try {
      routes.forEach((element) => {
        if (element.path === hashUrl) {
          throw element.breadcrumb;
        }
      });
    } catch (title) {
      window.document.title = title;
    }
  }

  menuEach = (menuConfig) => {
    // eslint-disable-next-line array-callback-return
    menuConfig.map((item) => {
      const { key, title } = item;
      routes.push({
        path: key,
        breadcrumb: title
      });
      if (item.children) {
        this.menuEach(item.children);
      }
    });
  };

  render() {
    return (
      <Breadcrumb style={{ margin: '16px 0', fontSize: '15px' }}>
        {this.props.breadcrumbs.map((breadcrumb, index) => (
          <Breadcrumb.Item key={breadcrumb.key}>
            <NavLink
              to={breadcrumb.match.url}
              onClick={() => {
                window.document.title = breadcrumb.breadcrumb.props.children;
              }}
            >
              { breadcrumb.breadcrumb.props.children }
            </NavLink>
            {(index < this.props.breadcrumbs.length - 1) && <i>  </i>}
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
    );
  }
}


export default withBreadcrumbs(routes)(BreadNav);
